<template>
  <div class="lh-main other">
    <div class="lh-other ones">
      <div class="lh-ones">
        <div class="container">
          <h1 class="lh-ones-h1">红药气雾剂</h1>
          <div class="lh-proDetails-banner swiper-container-horizontal">
            <ul class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">

              <li class="swiper-slide swiper-slide-active" style="width: 1001px;"><img src="@/assets/project/红药气雾剂.png" style="width:600px;"></li>

              <li class="swiper-slide swiper-slide-next" style="width: 1001px;"><img src="@/assets/project/红药气雾剂.png" style="width:600px;"></li>

            </ul>
            <div class="lh-history-btn"> <a href="javascript:;" class="prev swiper-button-disabled" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true"></a> <a href="javascript:;" class="next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></a> </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
          <div class="lh-proDetails-res1">
            <b>药品参数: 每瓶内容物重60g，含药液24ml*1瓶</b>
            <pre>产品名称：红药气雾剂</pre>
            <pre>批准文号：国药准字Z21021527</pre>
            <pre>生产单位：沈阳红药精诚药业有限公司</pre>
            <pre>【适应症】活血逐瘀，消肿止痛。用于跌打损伤，局部瘀血肿胀，筋骨疼痛。</pre>
          </div>
          <div class="lh-proDetails-res">
<!--            <b>药品简介: </b>-->
<!--            本品用于痤疮，扁桃腺炎，疖。-->
            <div style="position:relative;max-height:300px;overflow:hidden;text-align:center;">
<!--              <pre id="maximg"><p><br></p><p style="text-align: center;"><img src="@/assets/project/丹参酮胶囊.png" alt="丹参酮胶囊.jpg"></p></pre>-->
              <div style="position:absolute;left:0;width:100%;bottom:0;height:60px;line-height:60px;background:rgba(0,0,0,0.5);">
<!--                <a style="color:red;font-size:20px;font-weight:bold;cursor:pointer;" id="showAlert2">付费查看：5元/次</a>-->

              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/fonts/iconfont.css";
import "@/assets/styles/animate.min.css";
import "@/assets/styles/lhcommon.css";
import "@/assets/styles/alert.min.js";

export default {
  data() {
    return {};
  },
//
//   const btns = `
//   <button class="btn" id="CloseAlert">确定</button>
//   `;
//   const tzAlert = new TzAlert({
//   center: true, // 内容居中
//   isShow: false,  // 实例化完成直接显示
//   title: {
//   html: '标题',
//   color: '#ff80ab',
//   fontSize: '18px'
// },
//   maskClose: true,
//   mask: {
//   use: true,
//   background: 'rgba(0,0,0,.6)'
// },
//   tips: {
//   html: '点击内容部分即可复制'
// },
//   content: {
//   html: '我是一段文字，你来复制我啊！！！'
// },
//   onEvents(e) {
//   console.log('监听了内部的按钮事件')
//   console.log(e)
// },
//   onMounted: function () {
//   console.log('执行我吧')
// }
// });
//
//
//   // 事件调用显示
//   document.getElementById('showAlert2').onclick = function () {
//   tzAlert.open({
//     center: false,
//     title: {
//       html: '扫码付费购买'
//     },
//     tips: {
//       html: ''
//     },
//     maskClose: false,
//     mask: {
//       use: false,
//       background: 'rgba(0,0,0,.6)'
//     },
//     copy: {
//       onlyText: false,
//       isDbClick: false
//     },
//     cancel: {
//       use: false,
//     },
//     content: {
//       html: `<div class="demo"><img src='/static/upload/image/20250120/1737356213646908.jpg' width='420'/></div>`
//     },
//     onMounted: function () {
//       console.log('弹出完毕！')
//     }
//   });
// }


};
</script>

<style>
alert-btn {
  border-radius: 6px;
  padding: 6px 15px;
  background-color: var(--bgColor);
  border: 1px solid var(--bgColor);
  color: var(--textColor);
  transition: box-shadow .1s ease-in-out, transform .1s ease-in-out
}

alert-btn:active, alert-btn:hover {
  box-shadow: var(--shadow)
}

alert-btn:active {
  transform: scale(.98)
}

alert-btn + alert-btn {
  margin-left: 10px
}

alert-wrap {
  min-width: 300px;
  position: fixed;
  left: 50%;
  top: 10vh;
  box-sizing: border-box;
  padding: 15px 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  border-radius: 6px;
  font-size: 14px;
  z-index: 9999;
  color: #303133
}

alert-wrap.is-visible {
  display: block
}

alert-wrap.no-visible {
  visibility: hidden;
  z-index: -1;
  display: none
}

.el-is-show {
  display: block !important
}

.el-is-show-flex {
  display: flex;
  visibility: visible !important
}

.el-is-hide {
  visibility: hidden !important
}

alert-close {
  position: absolute;
  top: 5px;
  right: 13px;
  font-size: 26px;
  color: #F56C6C;
  transform: rotateZ(45deg);
  user-select: none;
  cursor: pointer;
  transition: transform .1s ease-in-out
}

alert-close:hover {
  transform: rotateZ(45deg) scale(1.1)
}

alert-title {
  user-select: none;
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  margin-bottom: 15px;
  color: #303133
}

alert-content {
  box-sizing: border-box;
  padding: 10px 0
}

alert-tips {
  user-select: none;
  margin-top: 10px;
  font-size: 12px;
  color: #909399
}

alert-copy-ok-tips {
  font-size: 12px;
  user-select: none;
  margin: 10px 0;
  color: #19be6b
}

alert-bottom {
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px
}

alert-wrap.is-center > alert-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  text-align: center
}

alert-wrap.is-center > alert-bottom {
  text-align: center
}
</style>